import React, { useEffect, useRef } from 'react'
import './SwiperIndex.scss'
import { throttle } from '@/utils/debounce'

function SwiperIndex({ImageList}) {

    const LayoutRef = useRef()

    // images存放图片的变量  /  imagnum 存放图片数量的变量
    const [images, setImages] = React.useState(ImageList[0])
    const [imagnum, setImagnum] = React.useState(1)

    // 鼠标划入盒子切换图片
    const MoveImageBox = throttle((event) => {
        let coord = LayoutRef.current.getBoundingClientRect()
        let left = event.clientX - coord.left;
        let moveWidth = LayoutRef.current.offsetWidth;
        for (let i = 0; i < ImageList.length; i++) {
            if ((i + 1) * (moveWidth / ImageList.length) >= left && (i) * (moveWidth / ImageList.length) <= left) {
                setImages(ImageList[i]);
                setImagnum(i + 1)
            }
        }
    }, 150)

    // 鼠标移出事件
    const LeaveImageBox = () => {
        setImages(ImageList[0]);
        setImagnum(1)
    }


    return (
        <div>
            {/* 图片布局盒子 */}
            <div className='Image-Layout-box' onMouseLeave={LeaveImageBox} onMouseMove={MoveImageBox} ref={LayoutRef}>

                <img style={{ width: '100%', height: '100%' }} src={images} alt="" />

                {/* 显示滚动图片数量 */}
                <div className='image-Num'>
                    <span>{imagnum}</span>
                    <span>/{ImageList.length}</span>
                </div>
            </div>
        </div>
    )
}

export default SwiperIndex
